import React, { useContext } from 'react'

import "./App.css"

// 使用context将state传递给后代组件
const MyContext = React.createContext()

function Parent() {

  return (
    <div className="Parent">
      <p>Parent</p>
      <A />
    </div>
  )
}

function A() {
  return (
    <div className="A">
      <p>A</p>
      <B />
    </div>
  )
}

function B() {
  const value = useContext(MyContext)
  return (
    <div className="B">
      <p>B</p>
      <p>接收先代组件的计数:{value.counter}</p>
      <p>接收先代组件的persons:
        {value.persons.map(e=><p key={e.id}>{e.name}</p>)}
      </p>
    </div>
  )
}



function App() {
  return (
    <MyContext.Provider value={{counter:10, persons:[{id:1, name:"tom"}, {id:2, name:"jerry"}]}}>
      <Parent />
    </MyContext.Provider>
  );
}

export default App;
